<template>
  <div class="app-container">
      <div class="filter-container">
        <el-input clearable v-model="search.shopName" placeholder="店铺名称" style="width: 170px;"></el-input>
        <el-input clearable v-model="search.shopPhone" placeholder="联系电话" style="width: 170px;margin-left:5px;"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="10%" align="center" label="Logo">
        <template slot-scope="scope">
          <span>
            <!-- <bx-image :src="scope.row.imageConvert"  :width="50" :height="50" :show-delete="false"></bx-image>  -->
            <el-image style="width: 50px; height: 50px" :src="scope.row.logoConvert" :preview-src-list="scope.row.logoPreviews"></el-image>
          </span>
        </template>
      </el-table-column>

      <el-table-column  min-width="10%" align="center" label="名称">
        <template slot-scope="scope">
          <span>{{ scope.row.shopName }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="机构电话">
        <template slot-scope="scope">
          <span>{{ scope.row.shopPhone }}</span>
        </template>
      </el-table-column>
      

      <el-table-column  min-width="20%" label="展示图片">
        <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.pictrues" :key="index">
                <el-image style="width: 50px; height: 50px" :src="item.src" :preview-src-list="scope.row.pictruePreviews"></el-image>
            </span>
        </template>
      </el-table-column>
      <el-table-column  min-width="15%" align="center" label="营业执照">
        <template slot-scope="scope">
            <span><el-image style="width: 50px; height: 50px" :src="scope.row.busLicenseImg" :preview-src-list="[scope.row.busLicenseImg]"></el-image></span>
            <br/>
            <span>{{ scope.row.busLicenseNum }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="法人">
        <template slot-scope="scope">
            <span>{{scope.row.legalName}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="状态">
        <template slot-scope="scope">
            <el-tag :type="(scope.row.type?'success':'info')" effect="dark">{{ (scope.row.type?'已审核':'未审核') }}  </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="10%" align="center" label="时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作"  min-width="20%">
        <template slot-scope="scope">
          <router-link :to="'/shopmanage/shopdetails/'+scope.row.id">
            <el-button type="primary" size="small">
              查看
            </el-button>
          </router-link>
          <el-button type="danger" size="small" style="margin-left:10px" @click="openCheckWindow(scope.row.id)">
              审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />

    <el-dialog title="店铺入驻审核" :visible.sync="dialog.visible"  width="700px">
        <div class="ci">
          <div class="item">
              <span class="name">店铺名称：</span>
              <span class="value">
                 {{dialog.data.name}}
              </span>
          </div>
          <div class="item">
            <span class="name required">审核结果</span>
            <span class="value">
              <el-switch  v-model="dialog.data.result"  active-color="#13ce66"  inactive-color="#ff4949"></el-switch> {{(dialog.data.result?'通过':'拒绝')}}
            </span>
          </div>
          <div class="item" v-show="dialog.data.result">
            <span class="name required">经度</span>
            <span class="value">
              <el-input clearable type="number" v-model="dialog.data.longitude"  placeholder="经度" style="width: 200px;"></el-input>
            </span>
          </div>
          <div class="item" v-show="dialog.data.result">
            <span class="name required">纬度</span>
            <span class="value">
              <el-input clearable type="number" v-model="dialog.data.latitude"   placeholder="纬度" style="width: 200px;"></el-input>
            </span>
          </div>
          <div class="item" v-show="dialog.data.result">
            <span class="name required">营业执照号</span>
            <span class="value">
              <el-input clearable v-model="dialog.data.busLicenseNum"  :placeholder="dialog.data.licensePlaceholder" style="width: 300px;"></el-input>
              <el-button type="primary" @click="discernLicense()" :loading="dialog.saveloading" style="margin-left:10px;">自动识别</el-button>
              <el-image  style="width: 40px; height: 40px; border-radius:4px;margin-left:10px;" :src="dialog.data.licenseImgConvert"  :preview-src-list="dialog.data.licenseImgPreviews"></el-image>
            </span>
          </div>
          <div class="item h70" v-show="!dialog.data.result">
            <span class="name required">拒绝原因</span>
            <span class="value">
              <el-input type="textarea" rows="3" clearable  v-model="dialog.data.rejectReason"   placeholder="拒绝原因"></el-input>
            </span>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialog.visible = false">取 消</el-button>
            <el-popconfirm :title="'确定要'+(dialog.data.result?'通过审核':'拒绝入驻')+'吗？'" icon="el-icon-info"  icon-color="red"  @onConfirm="saveCheckResult" >
                <el-button slot="reference" type="primary" :loading="dialog.saveloading" style="margin-left:10px;">确 定</el-button>
            </el-popconfirm>
        </div>
    </el-dialog>

  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as courseApi from '@/api/courseinfo'
import * as shopApi from '@/api/shop'
import * as uploadApi from '@/api/upload'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import BxImage from '@/components/BxImage'
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'

export default {
  name: 'ShopList',
  components: { Pagination,BxImage },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        type:'0',
        shopPhone:'',
        shopName:'',
      },
      search:{
        shopName:'',
        shopPhone:'',
      },
      dialog:{
        saveloading:false,
        discernloading:false,
        visible:false,
        data:{
          longitude:'',
          latitude:'',
          busLicenseNum:'',
          id:'',
          name:'',
          result:true,
          rejectReason:'',
          licensePlaceholder:'营业执照号码'
        }
      }
    }
  },
  created(){
      var that=this;
      that.getList();
  },
  mounted(){

  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      shopApi.getShopList(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              item.logoConvert=imageHelper.GetFullUrl(item.shopLogo,200,200);
              item.logoPreviews=[imageHelper.GetFullUrl(item.shopLogo,700,700)];

              item.pictrues=[];
              item.pictruePreviews=[];
              if(item.mainImg1){
                  item.pictrues.push({
                      src:imageHelper.GetFullUrl(item.mainImg1,200,200),
                  })
                  item.pictruePreviews.push(imageHelper.GetFullUrl(item.mainImg1,700,700));
              }
              if(item.mainImg2){
                  item.pictrues.push({
                      src:imageHelper.GetFullUrl(item.mainImg2,200,200),
                  })
                  item.pictruePreviews.push(imageHelper.GetFullUrl(item.mainImg2,700,700));
              }
              if(item.mainImg3){
                  item.pictrues.push({
                      src:imageHelper.GetFullUrl(item.mainImg3,200,200),
                  })
                  item.pictruePreviews.push(imageHelper.GetFullUrl(item.mainImg3,700,700));
              }


              return item;
            })];
            that.total=res.data.total || 0;
            that.listLoading = false;
         }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.shopName=that.search.shopName.trim();
      that.listQuery.shopPhone=that.search.shopPhone.trim();
      that.getList();
    },
    openCheckWindow(id){
        var that=this;
        var shop=this.list.filter(item=>item.id==id)[0];
        if(!shop){
            that.$message({
                message: '选择的数据行无效，请刷新后重试',
                type: 'warning'
            });
            return;
        }
        this.dialog.visible=true;
        this.dialog.data.longitude=shop.longitude;
        this.dialog.data.latitude=shop.latitude;
        this.dialog.data.id=shop.id;
        this.dialog.data.name=shop.shopName;
        this.dialog.data.licenseImgConvert=shop.busLicenseImg;
        this.dialog.data.licenseImgPreviews=[shop.busLicenseImg];
        this.dialog.discernloading=false;
    },
    discernLicense(){
        var that=this;
        this.dialog.discernloading=true;
        this.dialog.licensePlaceholder='正在识别营业执照号码...';
        shopApi.discernLicense({shopid:this.dialog.data.id}).then(res=>{
            if(res.data){
                this.dialog.data.busLicenseNum=res.data;
            }
            this.dialog.licensePlaceholder='营业执照号码';
            setTimeout(()=>{
                this.dialog.discernloading=false;
            },1000)
            
        }).catch(()=>{
            setTimeout(()=>{
                this.dialog.discernloading=false;
            },1000)
            this.dialog.licensePlaceholder='本次识别异常...';
        });
    },
    saveCheckResult(){
        var that=this;
        var data={
            id:that.dialog.data.id,
            isPass:that.dialog.data.result,
        }
        if(data.isPass){
            data.longitude=that.dialog.data.longitude;
            data.latitude=that.dialog.data.latitude;
            if(!data.latitude || !data.longitude){
                that.$message({
                    message: '请填写经纬度信息',
                    type: 'warning'
                });
                return;
            }
            data.busLicenseNum=that.dialog.data.busLicenseNum.trim();
            if(!data.busLicenseNum || data.busLicenseNum.length<15){
                that.$message({
                    message: '请填写营业执照号码（至少15位）',
                    type: 'warning'
                });
                return;
            }
            
        }else{
            data.reason=that.dialog.data.rejectReason.trim();
            if(!data.reason){
                that.$message({
                    message: '请填写拒绝原因',
                    type: 'warning'
                });
                return;
            }
        }
        that.dialog.saveloading=true;
        shopApi.checkShopEntering(data).then(res=>{
            if(res.data){
                that.$message({
                    message: (data.isPass?'店铺入驻成功！':'店铺入驻被拒绝了'),
                    type: 'success'
                });
                setTimeout(()=>{
                    that.dialog.saveloading=false;
                    that.dialog.visible=false;
                    var idx=that.list.findIndex(item=>item.id==data.id);
                    if(idx>-1 && data.isPass){
                        that.list.splice(idx,1);
                    }
                },1000)
            }
        })
    }

  }
}
</script>
